<template>
    <el-dialog
        :show-close="false"
        width="60%"
        top="80px"
        >
        <div class="tableSelect">
            <div class="tableSelect-title">选择桌台</div>
            <div style="padding: 0 4px;">
            <div class="tableSelect-tab" >
                <div class="tab-item" :class="{ active: tableSelectActive == k }" v-for="(v, k) in zoneList" :key="k" @click="onChangeTab('allTableSelect', k)">
                    <div>{{v.roomAreaName}}</div>
                    <div class="tab-item-bottom" :class="{ active: tableSelectActive == k }"></div>
                </div>
            </div>
            </div>
            
            <div class="tableSelect-main" @click="onSelectTable">
            <div class="tableSelect-main-item" :data-id="k" :data-name="v.roomName" :data-code="v.roomCode" :class="{ active: tabSelActive == k }" v-for="(v, k) in tableList" :key="k">{{ v.roomName }}</div>
            <div class="tableSelect-main-item spe" data-type="up" :class="{canNotUse:postForm.pageIndex == 1}" @click="onAllChangePage">上页</div>
            <div class="tableSelect-main-item spe" data-type="down" :class="{canNotUse:tableList.length < postForm.pageSize}" @click="onAllChangePage">下页</div>
            </div>
            <div class="popup-btn" style="padding: 0 4px;">
                <div class="btn-cancle" @click="onCancel">取消</div>
                <div class="btn-submit" @click="onConfirm">确认</div>
            </div>
        </div>
    </el-dialog>
 </template>
 <script setup>
 import Api from '@/api'
 import dayjs from "dayjs"
 import useConfigStore from '@/store/config'
 const configStore = useConfigStore()
 const props = defineProps({
     roomState: {
         type: String,
         default: ''
     },
 });
 const roomState = toRef(props, 'roomState')
 const emits = defineEmits(['update:show', 'cancel', 'confirm']);
 
 const onCancel = () => {
     emits('update:show');
     emits('cancel');
 }
 
 const onConfirm = () => {
    emits('confirm',roomInfo.value);
   
 }


 const tableSelectActive = ref(0)
 // 房台类型切换
 const onChangeTab = (type,k,v) => {
  switch (type) {
    case 'allTableSelect':
      tableSelectActive.value = k
      postForm.value.areaCode = zoneList.value[k].roomAreaCode
      getTableInfo()
      break
  }
  
}
 const tabSelActive = ref(-1) // 选中桌台的下标
 // 桌台选中切换
 const onSelectTable = (e)=>{
   if(e.target.dataset.id){
     tabSelActive.value = e.target.dataset.id
     roomInfo.value.name = e.target.dataset.name
     roomInfo.value.code = e.target.dataset.code
     console.log(roomInfo.value);
   }
 }
 const roomInfo = ref({
    name:'',
    code:''
 })
// 所有房台弹窗上下页切换
const onAllChangePage = (e)=>{
  if(e.target.dataset.type == 'down'){
    if(tableList.value.length<postForm.value.pageSize){
      return
    }else{
      postForm.value.pageIndex++
    }
    
  }else{
    if(postForm.value.pageIndex <= 1){
      return
    }else{
      postForm.value.pageIndex--
    }
  }
  getTableInfo()
}
 // 获取房台
const postForm = ref({
  reserveTime:'',
  roomState:'',
  pageSize: 23,
  pageIndex: 1,
  areaCode:''
})
const tableList = ref([])
const getTableInfo =  (flag)=>{
  if(flag){
    postForm.value.pageIndex = 1
  }
  postForm.value.roomState = roomState
  postForm.value.reserveTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
  Api.Common.PcObjProcess.Do({"functionName": "GetReserveRoomList","orgCode": "0004","contentData":postForm.value})
  .then(res=>{
    tableList.value = res.result[0].areaRooms
    console.log(res.result);
    console.log(tableList.value);
  })
}
 // ------------------------------------------- 获取房台类型 ----------------------------------------
 const zoneList = ref([])
 // 获取房台类型
 const getTableType = () => {
  let newArray = [{ roomAreaCode: '', roomAreaName: '全部' }]
  Array.prototype.push.apply(newArray, configStore.roomArea)
  zoneList.value = newArray
}
 getTableType() // 获取房台类型
 getTableInfo() // 获取房台
 </script>
 <style scoped lang="scss">
 .tableSelect{
         white-space: nowrap;
         padding: 36px 52px 20px;
         .tableSelect-title{
             font-family: Microsoft YaHei;
             font-weight: bold;
             font-size: 20px;
             color: #212121;
             line-height: 20px;
             padding: 0 0 32px 8px;
         }
         .tableSelect-tab{
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 0 42px;
             background: #F2F2F2;
             border-radius: 8px;
             // padding-left: 8px;
             .tab-item{
             padding: 15px 0px;
             width:16%;
             text-align:center;
             cursor: pointer;
             position: relative;
             &.active{
                 color: #FF6A00;
             }
             .tab-item-bottom{
                 position:absolute;
                 bottom:4px;
                 left: 50%; 
                 transform: translateX(-50%); 
                 width: 24px;
                 height: 2px;
                 background-color: #FF6A00;
                 border-radius: 1px;
                 display:none;
                 &.active{
                 display:block;
                 }
             }
             }
         }
         .tableSelect-main{
             display: flex;
             align-items: center;
             justify-content: start;
             flex-wrap: wrap;
             padding-top: 20px;
             .tableSelect-main-item{
             // flex: 1 0 calc(12.5% - 16px); /* 计算每个子元素的宽度，减去 margin */
             width: calc(12.5% - 16px);
             height: 96px;
             text-align: center;
             font-family: Microsoft YaHei;
             font-weight: bold;
             font-size: 24px;
             color: #212121;
             line-height: 96px;
             margin: 0 8px 16px 8px;
             background: #FFFFFF;
             border-radius: 8px;
             border: 1px solid #E6E6E6;
             cursor: pointer;
             &.spe{
                 background: #E6E6E6;
             }
             &.active{
                 background: #FFE566;
             }
             &.canNotUse{
                 background: #F2F2F2;
                 color: #CCCCCC;
             }
             }
         }
         .popup-btn{
                 display: flex;
                 align-items: center;
                 justify-content: center;
                 .btn-cancle{
                     text-align: center;
                     font-family: Microsoft YaHei;
                     font-weight: 400;
                     font-size: 24px;
                     color: #FF6A00;
                     line-height: 60px;
                     width: 160px;
                     height: 60px;
                     background: #FFFFFF;
                     border-radius: 8px;
                     border: 1px solid #FF6A00;
                     margin-right: 36px;
                     cursor: pointer;
                 }
                 .btn-submit{
                     font-family: Microsoft YaHei;
                     font-weight: 400;
                     font-size: 24px;
                     color: #FFFFFF;
                     line-height: 60px;
                     text-align: center;
                     width: 160px;
                     height: 60px;
                     background: #FF6A00;
                     border-radius: 8px;
                     cursor: pointer;
                     }
         }
     }
 </style>